<template>
	<div>
		<!-- <so-header :seller="headerTitle" :noBack="false" v-if="circle_master" @done="gowrap()"></so-header> -->
    <headerSearch :title="headerTitle"></headerSearch>
   
    <div class="suspension_content" style="margin-bottom: 1.1rem;">
      <!-- 头部浮层 -->
      <div class="main-suspension"> 
        <div class="suspension-top"></div>
        <div class="suspension-info">
          <!-- 卡片头部-上 -->
          <div class="suspension-info-top clear">
            <div class="circle_data_img">
              <img :src="cirImg" v-if="cirImg">
              <img src="../common/images/youquan.png" alt="" v-if="c_type == 3 && !cirImg">
              <span class="img_user_one" style="color: #DD948E;" v-if="c_type == 1 || c_type == 2">{{c_name.substring(0,1)}}</span>
              <!-- <span class="img_user_one" style="color: #fff;" :style="'background-color:' + bgcolor" v-if="c_type == 1 || c_type == 2">{{c_name.substring(0,1)}}</span> -->
            </div>
            <div class="suspension-info-top-center">
              <h2>{{headerTitle}}</h2>
              <p></p>
            </div>
            <div class="suspension-info-top-right" v-if = "buttonStatus == 1">
              <a href="javascript:void(0)" @click="circleUpdate()">
                  <i class="iconfont icon-transmit_icon icon_editor"></i>编辑
              </a>
            </div>
          </div>
          <!-- 卡片头部-下 -->
          <div class="suspension-circle-index-bottom" style="border-top: 1px solid #f3f3f3; padding-top: 0.3rem; margin: 0;">
            <ul class="clear">
              <li>
                <span>{{ccount}}</span>
                <span>企业数量</span>
              </li>
              <li>
                <span>{{pcount}}</span>
                <span>协会商品</span>
              </li>
              <li >
                <span>{{ncount}}</span>
                <span>协会新闻</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="main-notice" style=" position: relative;">
				<span>通知 | </span>
				<marquee>{{notice}}</marquee>

			</div>

      <!--圈主-->
      <div>
        <div class="main-index">
            <!-- 小方形头像 -->
            <div class="small_square">
              <ul class="small_soc">
                <li v-for="(list, index) in CompanyList" @click="JumpcompanyIndex(list.id)" :key="index">
                    <div class="all_colleague_img">
                      <img :src="list.log_img" v-if="list.log_img != null"/>
                      <img src="../common/images/youquan.png" v-else/>
                    </div>
                    <span>{{list.name}}</span>
                </li>
                <!-- <li class="add_active">
                    <img src="../common/images/jia.png"/>
                </li> -->
              </ul>
              <div class="btn_middle_red">
                  <button @click="allMember()">所有成员</button>
              </div>
            </div>
        </div>
        
        <!--新圈友申请-->
        <div class="mt-circle-tui"> 
          <!-- <mt-cell title="新圈友申请" v-model="count" is-link @click.native="Join"></mt-cell> -->
          <div to="" class="main_menu"  @click="tagShow" style="border-bottom: none;">
              <label for="">协会官网</label>
              <a href="javascript:void(0)"><span class="recommend">{{c_url}}</span><i class="iconfont icon-xiangyou"></i></a>
          </div>
        </div>
        <!--推荐模块-->
        <div class="mt-circle-tui"> 
          <div class="main_menu" @click="circleClick">
              <label for="" is-link>新圈友申请</label>
              <a href="javascript:void(0)"><span class="recommend">{{count}}</span><i class="iconfont icon-xiangyou"></i></a>
          </div>
          <div class="main_menu"  @click="recommend('com')">
              <label for="" >推荐企业</label>
              <a href="javascript:void(0)"><span class="recommend">推荐有奖</span><i class="iconfont icon-xiangyou"></i></a>
          </div>
          <div class="main_menu" @click="recommend('pro')">
              <label >推荐产品</label>
              <a href="javascript:void(0)"><span class="recommend"></span><i class="iconfont icon-xiangyou"></i></a>
          </div>
          <div class="main_menu" @click="recommend('news')">
              <label for="">推荐新闻</label>
              <a href="javascript:void(0)"><span class="recommend"></span><i class="iconfont icon-xiangyou"></i></a>
          </div>
          <!-- <div class="main_menu" @click="recommend('act')">
              <label for="">推荐活动</label>
              <a href="javascript:void(0)"><span class="recommend"></span><i class="iconfont icon-xiangyou"></i></a>
          </div> -->
          <!-- <div class="main_menu">
              <label for="" is-link>协会活动</label>
              <a href="javascript:void(0)"><span class="recommend"></span><i class="iconfont icon-xiangyou"></i></a>
          </div> -->
          <div class="main_menu"  @click="recommend('panic')">
              <label for="" is-link>抢购产品</label>
              <a href="javascript:void(0)"><span class="recommend"></span><i class="iconfont icon-xiangyou"></i></a>
          </div>
          <div class="main_menu" @click="incircleAssociate">
              <label for="" is-link>协会架构</label>
              <a href="javascript:void(0)"><span class="recommend"></span><i class="iconfont icon-xiangyou"></i></a>
          </div>
          <div class="main_menu" @click="incircleIndex()" style="border-bottom: none;">
              <label for="" is-link>圈子首页</label>
              <a href="javascript:void(0)"><span class="recommend"></span><i class="iconfont icon-xiangyou"></i></a>
          </div>

        </div>
      </div>
      <!--圈主结束-->
   <!-- 推荐选择 -->
		<div class="Editorial_dynamics" v-show="activeShow">
			<div class="intop"></div>
			<div class="editorial_list">
				  <div class="editorial_title">
							<button @click="cancel">取消</button>
							<h3>{{Title}}({{xNum}}/{{cNum}})</h3>
							<button @click="finish(request)">完成</button>
					</div>
					<div class="editorial_content" style="height: 6.1rem;overflow: scroll;">
            <el-row class="block-col-2" v-show="com_show">
                <el-col :span="24">
                    <el-dropdown trigger="click" @command="handleCommand" >
                        <span class="el-dropdown-link" style="padding: 0 0.2rem;">
                            {{companyName}}<i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown" class="el_down_item" style="width: 7rem;margin-left: -3.3rem !important; margin-top:-0 !important;left:50% !important;padding:0.12rem 0 !important;">
                            <el-dropdown-item icon="el-icon-plus" v-for="(colleague, ind) in CompanyList" :key="ind" :command="colleague" >{{colleague.name}}</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </el-col>
            </el-row>  

            <div class="editorial_excl" v-for="(list, act) in edit_list" :key="act">
							<div class="editorial_item clear" style="position: relative;">
									<div class="fl " >
										<img :src="list.img" alt="" v-if="list.img">
                    <img src="../common/images/youquan.png" alt="" v-else>
									</div>
									<div class="editorial_item_title fl" :value="list.id">
										 <p>{{list.name}}</p>
										 <p class="clear"  v-show="ed_show">
											 	<span class="fl">已售<em>{{list.Num}}</em>件</span>
												<span class="fr">{{list.date_time}}</span>
										 </p>
									</div>
									<div class="editorial_change fr">
										<!-- <Checkbox @checkClick="choose()"></Checkbox> -->
										 <Checkbox :model.sync="list.checked" @update:model="singChange"  :ref="'edit_id' + list.id" :disabled="list==='1'"></Checkbox>
									</div>
							</div>
						</div>

					</div>
					
			</div>
		</div>
    </div>
        <mt-popup
        v-model="popupVisible"
        position="bottom">
      <ul> 
        <li v-for="list in UcompanyList" @click="JoinCirlce(list.id)" :key="list.id">{{list.name}}</li>
      </ul>
    </mt-popup>
    <so-footer></so-footer>
  <!-- 弹出框控制 -->
    <div class="dialog__wrap" v-show="stateShow">
            <transition name="background-fade" @after-leave="afterLeave">
              <div class="dialog__background" v-if="show"></div>
            </transition>
          <transition name="fade-move">
              <div class="dialog">
                  <div class="dialog__head">
                      <span class="dialog__head__title">
                          请输入官网域名<br />(例:http://www.iisp.com)
                      </span>
                      <i class="iconfont icon-cuo dialog__head__btn" @click="close"></i>
                  </div>
                  <div class="dialog__body">
                      <span>
                          <input type="text" :placeholder="placeholder" class="message_level" v-model="c_url">
                      </span>
                  </div>
                  <div class="dialog__footer">
                      <button class="dialogbtnner" @click="cancelt()" :disabled="pending">取消</button>
                      <button class="dialogbtnner" @click="dialogbtn()" :disabled="pending">完成</button>
                  </div>
              </div>
          </transition>
			</div>
	</div>
</template>

<script>
import soFooter from '../components/footer-bar';
import headerSearch from '../public/header-search.vue';

// import soFooter from '../public/nav.vue';
import { MessageBox } from 'mint-ui';

import Checkbox from '../components/Checkbox';
  export default {
    data() {
      return {
        com_show:true,
        companyName:'所有企业',
        colleagueList: [{},{},{},{}],
        colleagueName:'001',
      	headerTitle:'',
      	cid:'',
      	popupVisible:false,
        CompanyList:[],
        UcompanyList:[],
        info:'',//圈子信息
        c_uid:'',
        buttonInfo:'编辑',
        userInfo:'',//用户信息
        cirImg:'',
        bgcolor: '',
        c_name: '',
        c_type: '',
        // c_brief: '', //用户简介
        companyLiAvatarHeight:'',
        buttonStatus:'1',
        buttonS:'1',
        count:'',
        circle_master:false,
        circle_member:false,
        circle_tourist:false,
        ccount:'0',//圈子企业数量
        pcount:'0',//圈子产品数量
        ncount:'0',//圈子动态数量
        dropintopShow: false, //遮罩层

        //显示控制
        notice_content:'',//企业公告内容
				descShow: false, //简介编辑
				editortext: '编辑',
				editor: '编辑',
				notice_show:true,//公告显示
				set_show:false,//设置显示
				join_show:false,//申请加入按钮显示
				shar_show:true,//分享按钮显示

				s_btn_more:false,

				//编辑显示控制
				
				notice_editor:false,//公告遮罩层显示控制
				add_module:false,//添加模块显示控制
        ed_show:false,
        edit_show:false,//下拉编辑显示

        shareShow:false,//分享显示控制
        shareLink:'',//分享链接

        Title:'',
        xNum:0,
        cNum:0,

        activeShow:false,

        edit_list:[],
        request:'',
        //推荐弹出框显示控制
        ed_show:false,

        notice:'',
        c_url:'',

	      //弹出框控制
				stateShow:false,
				pending: false,
				conttent:'',
				placeholder: '输入您的官网域名',
        show:false,
        
        access_token:'',
        
      };
    },
    components:{
      headerSearch,     
      Checkbox,
      soFooter 
    },
    created() {
        let that = this;
        that.userInfo = JSON.parse(window.localStorage.getItem('userInfo'));
        that.access_token = window.localStorage.getItem('access_token');
        that.cid = that.$route.query.paicheNo;
				//获取当前用户的所绑定的企业信息
				that.getThisUcompanyList(that.userInfo.uid);

        //获取当前圈子的企业
	      that.getUserEnterprise();
	      //获取当前圈子信息
	      that.getThisCircleInfo();
	      //给企业图标给宽度
        // let _width = that.$refs.img_li.offsetWidth;
	      // that.companyLiAvatarHeight = (_width - 10) *0.16;
        //获取当前圈子新申请的企业数
        that.getThisCircleJoinCount();
    },
    mounted() {
        let that = this;
        window.localStorage.setItem('paicheNo', this.$route.query.paicheNo);

        },
    methods: {
      cancelt(){
         this.stateShow = false;
      },
      dialogbtn(){
        let that = this;
        if(that.c_url == null || that.c_url == ''){
          that.$openTips({
              text: '不能为空',
              time: 1000
          })
        }
        that.$post(that.$path + '/index.php/api/circle/weburl',{cid:that.cid,c_url:that.c_url,access_token:that.access_token}).then((response) => {
            console.log('编辑官网',response);
            if(response.code == 200){
                this.stateShow = false;
                this.show = false;
                that.$openTips({
                    text: '编辑成功',
                    time: 1000
                })
                that.getThisCircleInfo();
            }else{
              this.stateShow = false;
              this.show = false;
              that.getThisCircleInfo();
            }
        })
      },
      //点击添加标签显示弹出框
      tagShow(){
          console.log(56);
          this.show = true;
          this.stateShow = true;
      },
      // 关闭弹框
      afterLeave() {
        this.stateShow = false;
      },
      close() {
        this.show = false;
        this.stateShow = false;
      },
      handleCommand(command) {
          let c_info = command;
          let c_id = c_info.id;
          this.companyName = c_info.name;
          let userId = this.userInfo.uid;
          let request = this.request;
          switch(request){
            case 'pro' :
            case 'panic' :
                //获取所选的企业下面的产品
                this.$fetch(this.$path + '/index.php/api/ProductList', {c_id}).then((response) => {
                    console.log('产品列表', response);
                    if(response.code == 200) {
                        this.edit_list = [];
                        if(response.data){
                            response.data.forEach((element,index) => {
                              this.edit_list.splice(0,0,{id:element.IDProduct,name:element.chrName,img:element.smallImg,date_time:element.dtCreate,Num:element.NumS,check:false});
                            });
                        }
                    }else{
                      this.edit_list = [];
                    }
                })
            break;
            case 'news' :
                //获取所选的企业下面的新闻
                this.$fetch(this.$path + '/index.php/api/NewsList', {c_id}).then((response) => {
                    console.log('新闻列表', response);
                    if(response.code == 200) {
                        this.edit_list = [];
                        if(response.data){
                            response.data.forEach((element,index) => {
                              this.edit_list.splice(0,0,{id:element.IDNews,name:element.Title,img:element.img,date_time:element.dtCreate,check:false});
                            });
                        }
                    }else{
                      this.edit_list = [];
                    }
                })
            break;
            case 'act' :
                //获取所选的企业下面的活动
                this.$fetch(this.$path + '/index.php/api/Activity/getActivityList', {c_id}).then((response) => {
                    console.log('活动列表', response);
                    if(response.code == 200) {
                        this.edit_list = [];
                        if(response.data){
                            response.data.forEach((element,index) => {
                              this.edit_list.splice(0,0,{id:element.id,name:element.title,img:element.img,date_time:element.create_time,check:false});
                            });
                        }
                    }else{
                      this.edit_list = [];
                    }
                })
            break;
          }
          
      },
      //点击选择需要显示的内容
			singChange(){
				let n = 0;
				let ids = '';
				this.edit_list.forEach(el => {
				if(el.checked) {
					n+=1;
					ids += el.id + ',';
				}

        })
          var ids_arr = ids.split(',');
          ids_arr.pop();
          console.log(ids_arr)
          this.xNum = n;
          this.ids = ids;
          if(ids_arr.length > this.cNum){
              this.$openTips({
                  text: '最多选择'+this.cNum+'个',
                  time: 2000
              })
              // 对比出新增了那个id
              for (let i = 0; i < ids_arr.length; i++) {
                  var reg = new RegExp('(?:^|,)' + ids_arr[i] + ',');
                  if(!this.prev_ids.match(reg)){
                      this.$refs['edit_id' + ids_arr[i]][0].checked = false;
                  }
              }
              return false;
          }
          this.prev_ids = ids;
          console.log(ids) 

      },
      //点击推荐
      recommend(val){
        let cid = this.cid;
        switch(val){
          case 'pro':
          case 'panic':
            this.Title = '推荐产品';
            this.ed_show = true;
            this.companyName = '所有企业';
            this.xNum = 0;
            //获取当前圈子下面所有企业的产品
              this.$fetch(this.$path + '/index.php/api/ProductList', {cid}).then((response) => {
                  console.log('产品列表', response);
                  if(response.code == 200) {
                      this.edit_list = [];
                      if(response.data){
                          //数量上限
                          this.cNum = response.data.length;
                          response.data.forEach((element,index) => {
                            this.edit_list.splice(0,0,{id:element.IDProduct,name:element.chrName,img:element.smallImg,date_time:element.dtCreate,Num:element.NumS,check:false});
                          });
                      }
                  }else{
                    this.edit_list = [];
                  }
              })
          break;
          case 'news':
            this.Title = '推荐新闻';
            this.ed_show = false;
            this.companyName = '所有企业';
            this.xNum = 0;
            //获取当前圈子下面所有企业的新闻
              this.$fetch(this.$path + '/index.php/api/NewsList', {cid}).then((response) => {
                    console.log('新闻列表', response);
                    if(response.code == 200) {
                        this.edit_list = [];
                        if(response.data){
                            //数量上限
                            this.cNum = response.data.length;
                            response.data.forEach((element,index) => {
                              this.edit_list.splice(0,0,{id:element.IDNews,name:element.Title,img:element.img,date_time:element.dtCreate,check:false});
                            });
                        }
                    }else{
                      this.edit_list = [];
                    }
                })
          break;
          case 'act':
            this.Title = '推荐活动';
            this.ed_show = false;
            this.companyName = '所有企业';
            this.xNum = 0;
            this.edit_list = [];
            //获取当前圈子下面所有企业的活动
            this.$fetch(this.$path + '/index.php/api/Activity/getActivityList', {cid}).then((response) => {
                  console.log('活动列表', response);
                  if(response.code == 200) {
                      this.edit_list = [];
                      if(response.data){
                          //数量上限
                          this.cNum = response.data.length;
                          response.data.forEach((element,index) => {
                            this.edit_list.splice(0,0,{id:element.id,name:element.title,img:element.img,date_time:element.create_time,check:false});
                          });
                      }
                  }else{
                    this.edit_list = [];
                  }
              })
          break;
          case 'com':
            this.Title = '推荐企业';
            this.ed_show = false;
            this.companyName = '所有企业';
            this.xNum = 0;
            this.com_show = false;
            this.edit_list = [];
            //数量上限
            this.cNum = this.CompanyList.length;
            //获取当前圈子下面所有企业
            console.log('推荐企业',this.CompanyList);
            console.log('进来了推荐企业',this.CompanyList.length);
            this.CompanyList.forEach((element,index) => {
              this.edit_list.splice(0,0,{id:element.id,name:element.name,img:element.log_img,date_time:element.create,check:false});
            });
          break;
        }

       

        // if(val == 'panic'){
        //   this.cNum = 4;
        // }else{
        //   this.cNum = 3;
        // }

        this.activeShow = true;
        this.request = val;
        
      },

      //点击完成
			finish(val) {

				let that = this;
				let ids = that.ids;
        let c_id= that.cid;
        let u_type = 2;//企业还是圈子更新  1企业更新 2圈子更新
				
				if(val == 'pro'){
					let type = 1;
						//请求接口修改产品热销状态
							that.$fetch(that.$path + '/index.php/api/updateProducstatus/'+c_id+'/'+ids+'/'+u_type+'/'+type).then((response) => {
								if(response.code == 200) {
										that.getCompanyInfo();
								}
						})
				}else if(val == 'panic'){
					let type =2;
					//请求接口修改产品抢购状态
						that.$fetch(that.$path + '/index.php/api/updateProducstatus/'+c_id+'/'+ids+'/'+u_type+'/'+type).then((response) => {
								if(response.code == 200) {
										that.getCompanyInfo();
								}
						})
				}else if(val == 'news'){
					let type =2;
					//请求接口修改新闻状态
						that.$fetch(that.$path + '/index.php/api/updateNewsstatus/'+c_id+'/'+ids+'/'+u_type).then((response) => {
								if(response.code == 200) {
										that.getCompanyInfo();
								}
						})
				}else if(val == 'act'){
					let type =2;
					//请求接口修改活动状态
						that.$fetch(that.$path + '/api.php/Activity/updateActivitystatus',{ids,c_id,u_type}).then((response) => {
								if(response.code == 200) {
										that.getCompanyInfo();
								}
						})
				}else if(val == 'module'){
					let status =1;
					//请求接口修改模块状态
						that.$fetch(that.$path + '/api.php/Company/updateCompanyModule',{c_id,ids,status}).then((response) => {
								if(response.code == 200) {
										that.getCompanyInfo();
								}
						})
				}else if(val == 'com'){
					let status =1;
					//请求接口修改推荐企业
						that.$post(that.$path + '/index.php/api/circle/updateCompanyHot',{c_id,ids}).then((response) => {
								if(response.code == 200) {
										that.getCompanyInfo();
								}
						})
				}
				
				this.activeShow = false;

			},
       /**
			 * 分享数+1
			 */
			// shareSuccess: function(){
			// 		var ddd = {};
			// 		ddd.user_id = this.userInfo.uid;
			// 		ddd.module = 2;
      //     ddd.module_id = this.cp_id; 
      //     this.ISshow = false;
			// 		this.$post(this.$path + '/index.php/api/count/share', ddd).then((response) => {
							
			// 		})
			// },
			/**
			 * 访问量加1
			 */
			visit: function(){
					console.log(955);
					// var data  = this.options;
					var ddd = {};
					ddd.user_id = this.userInfo.uid;
					ddd.module = 2;
					ddd.module_id = this.cp_id; 

					this.$post(this.$path + '/index.php/api/count/visit', ddd).then((response) => {
							
							console.log(response)
					})
      },
      cancel() {
				this.activeShow = false;
			},

    
     
      //获取圈子信息
      getThisCircleInfo:function(){
        let that = this;
        that.cid = that.$route.query.paicheNo;
        this.$fetch(this.$path+'/api.php/Circle/getCircleInfo',{cid:that.cid})
          .then((res) => {
          	console.log('圈子信息',res);
            if(res.code == 200){
              that.cirImg = res.data.img;
              that.info = res.data;
              that.headerTitle = res.data.c_name;
              that.c_uid = res.data.c_uid;
              that.pcount = res.data.pcount;
              that.ncount = res.data.ncount;
              that.notice = res.data.notice;
              that.c_url = res.data.c_url;
              that.c_type = res.data.c_type;
              that.bgcolor = res.data.bgcolor;
              that.c_name = res.data.c_name;
              // that.c_brief = res.data.c_brief;
            }    
          });
      },
      //点击申请加入圈子
      Join:function(){

      	let that = this;
      	let c_uid = that.info.c_uid;
      	let uid = that.userInfo.id;
      	let cid = that.cid;
      	if(c_uid == uid){
      		that.$router.push({path: '/JoinCircle', query: {cid: cid}}); 
      	}else{
      	let a= that.UcompanyList;
      	if(a ==''){
	      		MessageBox.alert('请您先绑定企业');
	      		 return false;
  	    }else{
          // this.popupVisible = true;
          that.$router.push({path: '/JoinCircle', query: {cid: cid}});
  	    }
	    
     	}
      },
      //加入圈子申请
      JoinCirlce:function(event){
      	let that = this;
        that.popupVisible = false;
        let cid = that.cid;
        let uid = that.userInfo.id;
        let cp_id = event
        if(cid ==''){
            MessageBox.alert('请选择您所代表的企业').then(action => {
              that.$router.push('/userCenter');
            });
           return false;
        } 
      		that.$fetch(
	          that.$path+'/api.php?s=/Circle/circleJoin',{cid:cid,uid:uid,cp_id:cp_id})
	        .then((res) => {
	          if(res.code == 200){
              MessageBox.alert('申请成功,等待审核').then(action => {
                  that.$router.push('/userCenter');
              });
	             
	          }else{
	            MessageBox.alert(res.msg);
	          }
	                
	        })
      },
      //获取圈子中的企业
      getUserEnterprise:function(){
      	let that = this;
        let cid = that.$route.query.paicheNo;

        this.$fetch(that.$path+'/api.php/Circle/getCircleCompanyList',{cid:cid})
        .then((res) => {
          console.log('圈子企业',res);
          that.ccount = res.data.count;
          that.CompanyList = res.data.list;
        })
      },
      //获取用户绑定的企业
      getThisUcompanyList:function(userId){
      	let that = this;
        this.$fetch(that.$path+'/api.php/company/getUserAllCompanyList',{userId:userId})
        .then((res) => {
          if(res.data.count < 1){
          	that.UcompanyList = '';
          }else{
          	that.UcompanyList = res.data.list;
          }
        })
      },
      
      //跳转到更多的企业列表
      JumpCompany() {
      	let that = this;
      	let cid = that.cid;
        that.$router.push({path: '/home/CircleCompanyList', query: {paicheNo: cid}}); 
      },
      //点击企业跳转到圈聊页面
      JumpcompanyInfo:function(cpId){
      	this.$router.push({path: '/information', query: {cpId: cpId}}); 
      },
      //获取当前圈子新申请的企业数
      getThisCircleJoinCount:function(){
        let that = this;
        let cid = that.cid;
        that.$fetch(that.$path+'/api.php/circle/getJoinCount',{cid:cid})
          .then((res) => {
            console.log('000000', that.$path)
            if(res.code == 200){
              that.count = res.data+'人申请加入';
            } 
        })

      },

      //点击跳转圈子主页
      incircleIndex(){
        this.$router.push({
            path: '/userCenter/circleindex',
            query: {
              paicheNo: this.cid
            }
          });
      },

      //点击修改编辑
      circleUpdate:function(){
        let that = this;
        that.$router.push({path: '/userCenter/CircleUpdate',query: {cid: that.cid}}); 
      },
      //点击所有成员进入协会成员页
      allMember() {
        // console.log(event)
        this.$router.push({path: '/memberAssociation',query: {cid: this.cid}}); 
      },
      //点击跳转圈子申请列表
      circleClick() {
      	let that = this;
      	let cid = that.cid;
        that.$router.push({path: '/circleApplication', query: {cid: cid}}); 
      },
      //点击企业名字跳转企业首页
      JumpcompanyIndex(id){
        if(this.$system != 'ios'){
          this.$router.push({path: '/userCenter/companyIndex', query: {cp_id: id}}); 
        }else{
          window.location.href = '/userCenter/companyIndex?cp_id=' + id;
        }       
      }, 
      //圈子协会架构
      incircleAssociate() {
        this.$router.push({path: '/userCenter/circleAssociation', query: {cp_id: this.cid}}); 
      },
      //进入圈子
      GotoCircle() {

      },
      
      
    }
  }

</script>
<style >
@import '../common/css/userCenter.css';

.circle_data_img .img_user_one {
    width: 1rem !important;
    height: 1rem;
    vertical-align: super;
    font-size: 0.3rem !important;
    line-height: 1rem;
    text-align: center;
    box-sizing: border-box;
    background: url('../common/images/UI-04.png') no-repeat center;
    background-size: cover;
    display: block;
}
/* 推荐动态弹框 */
.Editorial_dynamics .intop {
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 20;
}
.Editorial_dynamics .editorial_list {
	background-color: #fff;
	border-radius: 4px;
	width: 7rem;
	height: 6.7rem;
	overflow: hidden;
	position: fixed;
	z-index: 20;
	left: 50%;
	margin-left: -3.5rem;
	top: 50%;
	margin-top: -3.35rem;
}
.editorial_list .editorial_title {
	display: flex;
	justify-content: space-between;
	font-size: 0.28rem;
	color: #333;
	border-bottom: 1px solid #d8d8d8;
	line-height: 0.46rem;
	margin-top: 0.12rem;
	padding-bottom: 0.12rem;
}
.editorial_title button {
	border: 0;
	background-color: transparent;
	color: #999;
	font-size: 0.28rem;
	margin: 0 0.2rem;
}
.editorial_title button:last-child {
	background-color: #e50838;
	color: #fff;
	width: 1.14rem;
	border-radius: 4px;
}
.editorial_title h3 {
	font-weight: normal;
}
.editorial_list .editorial_excl {

}
.editorial_excl .editorial_item {
	padding: 0.2rem;
	border-bottom: 1px solid #d8d8d8;
}
.editorial_item img {
	width: 1rem;
	height: 1rem;
}
.editorial_item .editorial_item_title {
		line-height: 0.38rem;
    margin: 0.12rem;
		margin-left: 0.2rem;
}
.editorial_item .editorial_item_title p {
	font-size: 0.28rem;
	color: #333;
	text-align: left;
	display: block;
	width: 4.6rem;
}
.editorial_item .editorial_item_title p:first-child {
	width: 2rem;
	white-space: nowrap;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	overflow: hidden;
}
.editorial_item .editorial_item_title p em {
	font-style: normal;
	color: #e50838;
}
.editorial_item .editorial_change {
		position: absolute;
    width: 100%;
    right: 0;
    text-align: right;
    top: 0;
}


.editorial_content .el-row {
    border-bottom: 0.2rem solid #f5f5f5;
}
/* 全部同事 */
.editorial_content .el-col-24 {
    height: 1rem;
    line-height: 1rem;
    /* padding: 0 0.2rem; */
    box-sizing: border-box;
}
/* 全部同事第一层级 */
.editorial_content .el-col-24 .el-dropdown {
    width: 100%;
    height: 1rem;
    line-height: 1rem;
    box-shadow: none;
    font-weight: 400;
    font-style: normal;
    text-align: left;
    display: block;
}
/* 文字 */
.editorial_content .el-dropdown-link {
    height: 1rem;
    line-height: 1rem;
    font-size: 0.28rem;
    color: #333;
    cursor: pointer;
    display: block;
    /* padding: 0 0.2rem; */
}
  /* 下拉icon */
.editorial_content .el-icon--right {
    float: right;
    height: 1rem;
    line-height: 1rem;
    font-size: 0.28rem;
    color: #333;
}
/* 下拉层级 */
/* .editorial_content .el-dropdown-menu { */
    /* width: 7rem !important;
    height: auto;
    box-shadow: none;
    left: 50% !important;
    margin: 0;
    margin-left: -3.5rem;
    padding: 0;
    margin-top: 0 !important; */
/* } */
/* .editorial_content .el_down_item {
  top: 5rem !important;
  width: 7rem !important;
} */
/* 三角符号 */
.el-popper .popper__arrow, .el-popper .popper__arrow::after {  
    display: none;
}
/* 下拉item */
.editorial_content .el-dropdown-menu__item {
    height: 1rem;
    line-height: 1rem;
    font-size: 0.28rem;
    color: #333;
    padding: 0 0.2rem;
    box-sizing: border-box;
}


/* 分享引导 */
.Share_guidance {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url('../common/images/share.png') no-repeat;
    background-size: cover;
    z-index: 100;
    opacity: 0.8;
}

.circle_firend marquee {
    font-size: 0.28rem;
    color: #999;
    float: left;
    width: 80%;
    height: 0.6rem;
    line-height: 0.6rem;
}
.item_list {
  background-color: #fff;
}
.notice{
	margin-top: 10px;
    background: #fff;
    text-align: left;
    margin-bottom: 0;
    line-height: 35px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
}
.notice img{
	float: left;
    height: 35px;
    margin: 0 10px;
}
.main-index{
    padding: 0.4rem 0 0;
    background: #fff;
}
.main-index h4{
  margin: 0 0 20px 10px;
  padding: 0;
  text-align: left;
}
.main-index h4 a{
  float: right;
  color:#ccc;
  margin-right:10px;
  font-size: 14px;
}
.main-index h4 span{
  color:#f00;
  font-size:14px;
}
.icon-xiangyou{
      margin-top: 4px;
    margin-left: 5px; 
}
.main-center-index h5{
  font-size: 16px;
  margin: 0;
  padding: 0;
}
.main-center-index p{
  font-size: 16px;
}
.main-right-index {
  float: right;
  width: 20%;
  padding-right:20px;

}
.main-center-index{
      text-align: left;
    margin-left: 2%;
    float: left;
    width:55%;
}
.mt-circle-tui{
  margin: 0.2rem 0 0 0;
  background-color: #fff;
} 
.mt-circle-tui .recommend {
  font-size: 0.22rem;
  color: #e50838;
}
.main-index-member{
  background-color: #fff;
  margin-bottom: 0.2rem;
}
.main-center-index{
      text-align: left;
    margin-left: 2%;
    float: left;
    width:55%;
}
.main-huo-list{
    text-align: left;
    margin-left: 2%;
    float: left;
    width:65%;
}
.main-huo-list h5{
  font-size: 16px;
  margin: 0;
  padding: 0;
}
.main-huo-list p{
  font-size: 16px;
}
.main-center-index h5{
  font-size: 16px;
  margin: 0;
  padding: 0;
}
.main-center-index p{
  font-size: 16px;
}
.main-right-index {
  float: left;
    width: 20%;

}
/* 通知内容区 */
.main-notice {
	height: 0.6rem;
	width: 100%;
	background-color: #fff;
	display: flex;
	justify-content: flex-start;
	line-height: 0.6rem;
	padding: 0 0.2rem;
	margin-bottom: 0.2rem;
}
.main-notice span {
	font-size: 0.34rem;
	color: #e50838;
	font-weight: bold;
	display: inline-block;
	width: 1.4rem;
	margin-left: -0.1rem;
}
.main-notice marquee {
	font-size: 0.28rem;
	color: #333;
	line-height: 0.66rem;
}
.main-notice .notice_editor {
    position: absolute;
    width: 95%;
    height: 0.6rem;
    background-color: rgb(0,0,0,0.4);
    left: 0.2rem;
}
.main-notice small {
		float: right;
    height: 0.6rem;
    margin-top: -0.2rem;
		padding-right: 0.14rem;
		color: #fff;
}
.main-notice .notice_editor .icon-shanjian {
    position: absolute;
    left: -.1rem;
		top: -0.3rem;
		color: #e50838;
}

.main-index-member .el-hot-product li img{
    float: left;
    margin: 5px;
    width:100%;
    border-radius: 4px;
}
.main-index-member .el-hot-product li{
  width:28%;
  margin-left:4%;
  float:left;
  padding:0;
  border-bottom:none;
  margin-bottom:15px;
}
 .main-index-member .el-hot-product li p{
  padding:0;
  margin:5px;
  text-align:center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  float:left;
}
.main-index-member .el-hot-product li span{
  color:#999999;
}
.main-index-member .el-hot-product li span font{
  color:#cc0000;
  margin:0 5px;
}

.main-index-member .el-hot-Snatch li img{
    float: left;
    margin: 5px;
    width:95%;
    border-radius: 4px;
}
.main-index-member .el-hot-Snatch li{
  width:48%;
  margin-left:2%;
  float:left;
  padding:0;
  border-bottom:none;
  margin-bottom:15px;
}
.main-index-member .el-hot-Snatch li p{
  padding:0;
  margin:5px;
  text-align:left;
  font-family: 微软雅黑;
  color: #333;
}
.main-index-member .el-hot-Snatch li span{
  color:#999999;
}
.main-index-member .el-hot-Snatch li span font{
  color:#f00;
  margin:0 5px;
}
.main-index-member .el-hot-Snatch li .left{
    background: #cc0000;
    color: #fff;
    padding: 2px 5px;
    font-size: 14px;
    float: left;
    border-radius: 2px;
}
.main-index-member .el-hot-Snatch li font{
  color:#cc0000;
  font-size:18px;
}
.main-index-member .el-hot-Snatch li .right{
  font-size:12px;
}

.main-index-member .el-activity li{
  position:relative;
}
.main-index-member .el-activity li img{
  border-radius: 4px;
  width:30%;
  height:100px;
  margin:0;
}
.main-index-member .el-activity .main-center{
  width:65%;
}
.main-index-member .el-activity .main-center p{
  font-size:14px;
  color:#a7a7a7;
}
.main-index-member .el-activity .el-button{
  width:100px;
  float:right;
  margin-top:5px;
  border-radius: 2px;
  color: #fff;
      padding: 6px 10px;
    margin-right: 10px;
    background:#ed5252;
}

.main-index-member .el-activity .main-huo-list .price{
  float:left;
  color:#cc0000;
  font-weight: bold;
  position: absolute;
  bottom: 10px;
}
.main-index-member .el-activity .main-huo-list .prices{
  float:left;
  color:#999999;
  font-size:14px;
      position: absolute;
    bottom: 10px;
}
.main-index-member .el-activity .main-huo-list .date{
   color:#999999;
  font-size:14px;
      position: absolute;
    bottom: 10px;
    right:20px;
}
.main-index-member .el-activity .first h5{
  font-size:12px;
  text-align:left;
}
.main-index-member .el-activity .first img{
  width:30%;
  margin-right:3%;
}
.main-index-member .el-activity .first span{
  
  color:#999999;
}
.main-index-member .el-activity .first  .left{
  float:left;
  margin:5px 0;
}
.main-index-member .el-activity .first .right{
   float:right;
   margin:5px 15px;
}

/* 游客 */
.purchase_title span {
  margin-right: 0.24rem;
}
.purchase_title em {
  font-style: normal;
  font-size: 0.2rem;
  color: #fff;
  background-color: #E50834;
  padding: 0.06rem;
  margin-left: 0;
}
/* 圈友 */
.circle_firend .industry_circle {
    margin: 0 !important;
    /* margin-top: -0.2rem !important; */
}

</style>


<style lang="scss" scoped>
//添加同级和下级弹框
.dialog {
  width: 6rem;
  border-radius: 4px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  background-color: #fff;
  font-size: 0.32rem;
  z-index: 10;
  &__wrap {
  }
  &__background {
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10;
  }
  &__head {
    padding: 0.2rem 0.3rem;
    line-height: 1;
    &__title {
      line-height: 1;
      font-size: 0.28rem;
      color: #333;
    }
    &__btn {
      line-height: 1;
      float: right;
      font-size: 0.28rem;
      color: #999;
      // -webkit-text-stroke-width: 0.02rem;   //加粗字体图标
    }
  }
  &__body {
    padding: 0.1rem 0;
    color: #666;
    font-size: 0.28rem;
    white-space: normal;
    word-break: break-all;
    span {
      display: block;
      font-size: 0.24rem;
      color: #333;
      height: 0.66rem;
      line-height: 0.66rem;
      label {
        height: 0.66rem;
        line-height: 0.66rem;
        display: inline-block;
      }
      input {
          padding: 0 0.04rem;
          border: 0;
          outline: none;
          height: 0.66rem;
          line-height: 0.66rem;
          border-bottom: 1px solid #d8d8d8;
      }
    }
  }
  &__footer {
	font-size: 0;
  line-height: 1;
  padding: 0.2rem 0;
    .dialogbtnner {
		    font-size: .22rem;
        background-color: #e50838;
        border-top: 1px solid #e50838;
        width: 1rem;
        padding: .08rem 0;
        color: #fff;
        border-radius: 4px;
        margin: 0 0.1rem;
    }
    .dialogbtnner:first-child {
      background-color: #fff;
      color: #e50838;
      border: 1px solid #e50838;
    }
  }
}
.background-fade {
  &-enter {
    opacity: 0;
  }
  &-enter-active {
    transition: opacity 0.2s;
  }
  &-enter-top {
    opacity: 1;
  }
  &-leave {
    opacity: 1;
  }
  &-leave-active {
    transition: opacity 0.2s;
    opacity: 0;
  }
}
.fade-move {
  &-enter {
    opacity: 0.6;
    top: 45%;
  }
  &-enter-active {
    transition: top 0.4s ease-in-out, opacity 0.4s ease-in-out;
  }
  &-enter-to {
    opacity: 1;
    top: 50%;
  }
  &-leave {
  }
  &-leave-active {
  }
  &-leave-to {
  }
}

</style>